<template>
  <div class="register-form">
    <h2>用户注册</h2>
    <div class="form-item">
      <label>用户名：</label>
      <input type="text" v-model="username" placeholder="请输入用户名">
    </div>
    <div class="form-item">
      <label>密码：</label>
      <input type="password" v-model="password" placeholder="请输入密码">
    </div>
    <div class="form-item">
      <label>邮箱：</label>
      <input type="email" v-model="email" placeholder="请输入邮箱">
    </div>
    <button @click="handleRegister">注册</button>
    <p @click="$router.push('/login')" class="link">去登录 →</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import request from '@/utils/request';

const username = ref('');
const password = ref('');
const email = ref('');
const router = useRouter();

// 注册逻辑：调用后端 /user/register 接口
const handleRegister = async () => {
  const result = await request.post('/register', {
    username: username.value,
    password: password.value,
    email: email.value
  });
  alert(result); // 显示注册结果（如“注册成功”）
  router.push('/login'); // 注册成功后跳转到登录页
};
</script>

<style scoped lang="less">
.register-form {
  width: 300px;
  margin: 80px auto;
  padding: 20px;
  border: 1px solid #eee;
  .form-item { margin: 15px 0; }
  input { width: 180px; padding: 8px; margin-left: 10px; }
  button { width: 100%; padding: 10px; background: #42b983; color: #fff; border: none; cursor: pointer; }
  .link { color: #42b983; text-align: center; margin-top: 15px; cursor: pointer; }
}
</style>